<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>原型与原型链</title>
</head>

<body>
  <h1>原型与</h1>
  <h3>概念</h3>
  <p>
    原型是 JavaScript
    中一个重要的概念，它允许对象继承属性和方法。每个对象都有一个原型对象，当访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript 引擎会在该对象的原型对象中查找。
  </p>

  <h3>方法</h3>
  <p>
    原型对象的方法有：
  </p>
  <ul>
    <li>Object.getPrototypeOf(obj)：返回对象 obj 的原型对象。</li>
    <li>Object.setPrototypeOf(obj, proto)：将对象 obj 的原型对象设置为 proto。</li>
    <li>Object.prototype.isPrototypeOf(obj)：判断对象 obj 是否是另一个对象的原型对象。</li>
    <li>Object.create(proto, [propertiesObject])：创建一个新对象，该对象的原型对象为 proto，可选的 propertiesObject 参数用于指定新对象的属性和方法。</li>
  </ul>
  <h3>示例 看F12</h3>

  <h3>扩展</h3>
  <p>
    构造函数与原型对象：
  </p>
  <p>
    每个构造函数都有一个原型对象，该原型对象包含了该构造函数创建的所有实例的公共属性和方法。
  </p>

  <h3>总结</h3>
  <p>
    原型是 JavaScript 中一个重要的概念，它允许对象继承属性和方法，并且可以通过原型对象的方法来操作原型。
  </p>

  <h1>原型链</h1>
  <h3>概念</h3>
  <p>
    原型链是由原型对象组成的层次结构，当访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript 引擎会在该对象的原型对象中查找，如果原型对象也没有该属性或方法，
    则会继续在该原型对象的原型对象中查找，直到找到该属性或方法或者到达原型链的顶部（即 Object.prototype）。
  </p>
  <h3>扩展</h3>
  <p>
    原型链的长度：
  </p>
  <p>
    原型链的长度取决于对象的原型对象的层次结构，一般来说，原型链的长度不会太长，因为原型对象的属性和方法通常都是通用的。
  </p>
  <h3>总结</h3>
  <p>
    原型链是由原型对象组成的层次结构，当访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript 引擎会在该对象的原型对象中查找，如果原型对象也没有该属性或方法，
    则会继续在该原型对象的原型对象中查找，直到找到该属性或方法或者到达原型链的顶部（即 Object.prototype）。
  </p>
</body>
<script>
  // 原型对象的方法 案例
  // 创建一个原型对象
  const proto = {
    foo: '1',
    baz: function () {
      console.log('2');
    }
  };
  // 创建一个对象，该对象的原型对象为 proto
  const obj = Object.create(proto);
  // 访问 obj 的属性和方法
  console.log(obj.foo); 
  obj.baz(); 
  // 原型链的案例
  // 创建一个原型对象
  const proto1 = {
    foo: '3'
  };
  // 创建一个对象，该对象的原型对象为 proto1
  const obj1 = Object.create(proto1);
  // 访问 obj1 的属性
  console.log(obj1.foo);
  // 原型链的长度
  // 创建一个原型对象
  const proto2 = {
    foo: '4'
  };
  // 创建一个对象，该对象的原型对象为 proto2
  const obj2 = Object.create(proto2);
  // 访问 obj2 的属性
  console.log(obj2.foo); 

</script>

</html>